<template>
  <div style="width: 100%;height: 100%;">
    <div class="titleBox">
      <p>月分类能耗统计</p>
      <i class="separate"></i>
    </div>
    <div class="MonthEnergyPicture" id="MonthEnergyPicture"></div>
    <div class="titleBox">
      <p>楼栋能耗统计</p>
      <i class="separate"></i>
    </div>
    <div class="floorEnergyStatistics">
      <ul>
        <div>
          <b>耗水 /吨</b>
        </div>
        <li v-for="index in 7" :key="index">
          <span>A栋</span>
          <div>
            <div></div>
          </div>
          <b>2032</b>
        </li>
      </ul>
      <ul>
        <div>
          <b>耗电 /晚度</b>
        </div>
        <li v-for="index in 7" :key="index">
          <span>A栋</span>
          <div>
            <div></div>
          </div>
          <b>2032</b>
        </li>
      </ul>
    </div>
    <div class="titleBox">
      <p>企业能耗排名</p>
      <i class="separate"></i>
    </div>
    <ul class="enterpriseList">
      <li v-for="index in enterpriseDataList.length" :key="index">
        <span>0{{ index }}.</span>
        <div>
          <b>{{ enterpriseDataList[index - 1].name }}</b>
          <ul class="enterpriseDataList">
            <li>
              <i></i>
              <p>{{ enterpriseDataList[index - 1].electricity }} 度</p>
            </li>
            <li>
              <i></i>
              <p>{{ enterpriseDataList[index - 1].water }} 吨</p>
            </li>
            <li>
              <i></i>
              <p>{{ enterpriseDataList[index - 1].gas }} 立方</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  energyStatisticsEcharts,
  alarmEcharts,
  monthEnergyEcharts,
} from "../assets/js/echarts.js";
import {
  energyStatisticsEchartsData,
  energyStatistics2EchartsData,
  energyStatistics3EchartsData,
  energySumData,
  alarmEchartsData,
  enterpriseData,
  energyConsumptionData,
} from "../assets/js/data.js";
export default {
  data() {
    return {
      energySumDataList: energySumData,
      enterpriseDataList: enterpriseData,
    };
  },
  computed: {
    energyStatisticsOnePictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsOnePicture")
      );
    },
    energyStatisticsTowPictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsTowPicture")
      );
    },
    energyStatisticsThreePictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsThreePicture")
      );
    },
    alarmPictureInit() {
      return this.$echarts.init(document.getElementById("alarmPicture"));
    },
    monthEnergyInit() {
      return this.$echarts.init(document.getElementById("MonthEnergyPicture"));
    },
  },
  methods: {
    energyStatisticsOne() {
      let option = energyStatisticsEcharts(energyStatisticsEchartsData);
      if (option) {
        this.energyStatisticsOnePictureInit.setOption(option);
      }
    },
    energyStatisticsTow() {
      let option = energyStatisticsEcharts(energyStatistics2EchartsData);
      if (option) {
        this.energyStatisticsTowPictureInit.setOption(option);
      }
    },
    energyStatisticsThree() {
      let option = energyStatisticsEcharts(energyStatistics3EchartsData);
      if (option) {
        this.energyStatisticsThreePictureInit.setOption(option);
      }
    },
    alarm() {
      let option = alarmEcharts(alarmEchartsData);
      if (option) {
        this.alarmPictureInit.setOption(option);
      }
    },
    monthEnergy() {
      let option = monthEnergyEcharts(energyConsumptionData);
      if (option) {
        this.monthEnergyInit.setOption(option);
      }
    },
  },
  mounted() {
    this.energyStatisticsOne();
    this.energyStatisticsTow();
    this.energyStatisticsThree();
    this.alarm();
    this.monthEnergy();
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/chuShiHua.less";
@import "../../../assets/css/data.css";
@import "../assets/css/energyStatistics.less";
</style>
